<template>
	<div class="header" :class="fix">
		<div class="header-back">
			<span class="iconfont">&#xe60c;</span>
		</div>
		<div class="header-search" :class="change">
			<span class="iconfont">&#xe996;</span>
			上海海昌海洋公园</div>
		<div class="header-city">
			<span class="iconfont">&#xe63f;</span>
			苏州
		</div>
	</div>
</template>

<script>
export default {
	name: 'homeHeader',
	data(){
		return{
			fix: "",
			change: ""
		}
	},
	methods:{
		acrollEven(){
			let height = document.documentElement.scrollTop
			if(height>0){
				this.fix = "fix"
				this.change = "change"
			}
			else{
				this.fix = ""
				this.change = ""
			}
		}
	},
	mounted(){
		window.addEventListener('scroll',this.acrollEven)
	}
}
</script>

<style>
.fix{
	position: fixed;
	z-index: 100;
	background-color: white;
}
.change{
	background-color: #EEEEEE;
}
.header{
	line-height: .85rem;
	text-align: center;
	display: flex;
}
.header-back{
	float: left;
	width: .88rem;
}
.header-search{
	flex: 1;
	height: .45rem;
	line-height: .45rem;
	margin: .22rem .2rem 0 .2rem;
	border-radius: .5rem;
	box-shadow: 0 0 .01rem .02rem #ccc;
}
.header-city{
	float: right;
	width: 1.4rem;
}
</style>
